body, html {
    height: 100%
}

#loading, #root-container {
    height: 100%
}

.sprite {
    width: 43px;
    height: 18px;
    background-image: url();
    background-size: 48px auto;
    background-repeat: no-repeat;
    display: block;
    animation: a_load 1s steps(1) infinite alternate;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@keyframes a_load {
    0% {
        background-position: -2.5px -2.5px
    }
    5% {
        background-position: -2.5px -255.5px
    }
    10% {
        background-position: -2.5px -324.5px
    }
    15% {
        background-position: -2.5px -347.5px
    }
    20% {
        background-position: -2.5px -370.5px
    }
    25% {
        background-position: -2.5px -393.5px
    }
    30% {
        background-position: -2.5px -416.5px
    }
    35% {
        background-position: -2.5px -439.5px
    }
    40% {
        background-position: -2.5px -462.5px
    }
    45% {
        background-position: -2.5px -25.5px
    }
    50% {
        background-position: -2.5px -48.5px
    }
    55% {
        background-position: -2.5px -71.5px
    }
    60% {
        background-position: -2.5px -94.5px
    }
    65% {
        background-position: -2.5px -117.5px
    }
    70% {
        background-position: -2.5px -140.5px
    }
    75% {
        background-position: -2.5px -163.5px
    }
    80% {
        background-position: -2.5px -186.5px
    }
    85% {
        background-position: -2.5px -209.5px
    }
    90% {
        background-position: -2.5px -232.5px
    }
    95% {
        background-position: -2.5px -278.5px
    }
    100% {
        background-position: -2.5px -301.5px
    }
}
.btn, .page-btn {
    color: rgba(255, 255, 255, 1);
    background-color: #397008;
}

.ui-button-primary {
    background-color: #397008;
    border-color: #397008;
}

.btn:before, .page-btn:before {
    background-color: rgba(0, 0, 0, 0.1);
}

.ui-button-primary:hover, .ui-button-primary:active {
    background-color: #397008;
    border-color: #397008;
}

.page-btn-second {
    color:#397008;
    background-color: #397008;
}

strong, strong span {
    color: #397008;
}

.question-tag.error {
    background-color: rgba(218, 35, 25, 1);
}

.question-required {
    color: rgba(218, 35, 25, 1);
}

.s-page, .page, .page-survey, .cascade-pop-page {
    background-color: rgba(242, 242, 242, 1);
}

.s-main, .question {
    background-color: rgba(255, 255, 255, 1);
}

.copyright {
    color: rgba(0, 0, 0, 0.3);
}

.s-prog-wait {
    background-color: rgba(0, 0, 0, 0.05);
}

.survey-mobile .progress-bar {
    background-color: rgba(255, 255, 255, 1);
}

.s-prog-done, .page-survey .progress-done {
    background-color: #397008;
}

.page-survey .progress {
    background-color: rgba(230, 230, 230, 1);
}

.s-ques-desc {
    color: rgba(0, 0, 0, 0.6);
}

.question-tag {
    background-color: rgba(0, 0, 0, 0.05);
}

.checkbox-input:checked + .checkbox-cell .radio-box {
    border-color: #397008;
}

.checkbox-input + .checkbox-cell .radio-box {
    border-color: rgba(0, 0, 0, 0.3);
}

.checkbox-input:checked + .checkbox-cell .check-box {
    background-color: #397008;
}

.checkbox-input + .checkbox-cell .check-box {
    border-color: rgba(0, 0, 0, 0.3);
}

.checkbox-input:checked + .checkbox-cell {
    color: #397008;
}

.checkbox-input:checked + .checkbox-cell .check-box .checkbox-icon {
    stroke: rgba(255, 255, 255, 1);
}

.selectbox, .select-list {
    border-color: rgba(0, 0, 0, 0.2);
}

.selectbox.on {
    border-color: #397008;
}

.select-list li .tick {
    stroke: #397008;
}

.selectbox:after {
    border-top-color: rgba(0, 0, 0, 1);
}

.inputs-input, .inputs-textarea {
    border-color: rgba(0, 0, 0, 0.2);
}

.inputs-input:focus, .inputs-textarea:focus {
    border-color: #397008;
}

.inputs-input::placeholder, .inputs-textarea::placeholder {
    color: rgba(0, 0, 0, 0.3);
}

.question-tips span {
    background-color: rgba(242, 242, 242, 1);
}

.question-tips span:before {
    background-color: rgba(242, 242, 242, 1);
}

.checkbtn-label {
    background-color: rgba(0, 0, 0, 0.1);
}

.checkbtn-group .checkbtn-input:checked + .checkbtn-label:after {
    background-color: #397008;
    color: rgba(255, 255, 255, 1);
}

.checkbtn-group .checkbtn-input:checked + .checkbtn-label {
    color: rgba(255, 255, 255, 1);
}

.slider-bar {
    background-color: rgba(0, 0, 0, 0.1);
}

.slider-handle {
    background-color: #397008;
}

.slider-tip {
    background-color: #397008;
    color: rgba(255, 255, 255, 1);
}

.slider-tip:after {
    border-top-color: #397008;
}

.s-slider-bar-done {
    background-color: #397008;
}

.slider-handle-num {
    background-color: #397008;
}

.linkage-list {
    border-color: rgba(0, 0, 0, 0.2);
}

.linkage-item {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.linkage-item:after {
    background-color: #397008;
    border-color: #397008;
}

.linkage-list .linkage-item.on {
    color: rgba(255, 255, 255, 1);
}

.linkage-item.not-end:before {
    border-left-color: rgba(0, 0, 0, 1);
}

.linkage-list .linkage-item.on:before {
    border-left-color: rgba(255, 255, 255, 1);
}

.cascade-pop-page-body-content {
    background-color: rgba(255, 255, 255, 1);
}

.cascade-pop-page-back {
    color: #397008;
}

.checkbox-option:not(:first-child):before {
    border-top-color: rgba(0, 0, 0, 0.1);
}

.icon-arrow-right {
    fill: rgba(0, 0, 0, 0.2);
}

.checkbox-icon {
    fill: #397008;
}

.checkbox-cell-ft:before {
    box-shadow: 0 0 0 8px undefined inset;;
}

.cascade-cell:not(:first-child):after {
    border-top-color: rgba(0, 0, 0, 0.1);
}

.ui-radio input:checked + label::before {
    border-color: #397008;
}

.ui-radio input + label::before {
    border-color: rgba(0, 0, 0, 0.3);
}

.ui-checkbox input:checked + label .check-box {
    background-color: #397008;
}

.ui-checkbox input + label .check-box {
    border-color: rgba(0, 0, 0, 0.3);
}

.matrix-table tr {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.checkbtn-cont, .checkbtn-label {
    background-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 1);
}

.checkbtn-cont:after, .checkbtn-label:after {
    background-color: #397008;
    color: rgba(255, 255, 255, 1);
}

.upload-trigger {
    border-color: rgba(0, 0, 0, 0.2);
}

.upload-trigger .btn_s, .upload-lt .btn_s {
    color: #397008;
}

.sort-box, .sort-item {
    border-color: rgba(0, 0, 0, 0.2);
}

.sort-num {
    background-color: rgba(0, 0, 0, 0.05);
}

.sort-num-item.active {
    background-color: #397008;
    color: rgba(255, 255, 255, 1);
}

.sort-handle-line:before, .sort-handle-line:after {
    background-color: rgba(0, 0, 0, 0.2);
}

.sort-item.gu-mirror {
    background-color: #397008;
    color: rgba(255, 255, 255, 1);
}

.sort-item.gu-mirror .sort-handle-line:before, .sort-item.gu-mirror .sort-handle-line:after {
    background-color: rgba(255, 255, 255, 1);
}

.sort-row:not(:first-child):before {
    border-top-color: rgba(0, 0, 0, 0.1);
}

.sort.sorted:not(.sorting) .sort-seq {
    background-color: #397008;
}

.cell:before {
    background-color: #397008;
}

.moving .sort-seq {
    color: #397008;
    background-color: rgba(255, 255, 255, 1);
}

.survey-mobile .moving .sort-handle-line:nth-child(1):before, .survey-mobile .moving .sort-handle-line:nth-child(3):before, .survey-mobile .moving .sort-handle-line:nth-child(1):after, .survey-mobile .moving .sort-handle-line:nth-child(3):after {
    background-color: rgba(255, 255, 255, 1);
}

.survey-mobile .sort-handle-line:nth-child(1):before, .survey-mobile .sort-handle-line:nth-child(3):before, .survey-mobile .sort-handle-line:nth-child(1):after, .survey-mobile .sort-handle-line:nth-child(3):after {
    background-color: rgba(0, 0, 0, 0.2);
}

.survey-mobile .sort-handle-line:nth-child(2) {
    background-color: rgba(0, 0, 0, 0.2);
}

.sort-seq {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 0.2);
}

.question-head .mod_fillblank, .question-head input.mod_fillblank {
    color: #397008;
    border-bottom-color: rgba(0, 0, 0, 1);
}

.mod_fillblank.active {
    border-bottom-color: #397008;
}

.page-cover-pic .laptop .quote-l-bg {
    background-color: #397008;
}

.page-cover-pic .laptop .quote-l-bg:after {
    border-top-color: #397008;
    border-left-color: #397008;
}

.page-cover-pic .laptop .pen-b {
    background-color: #397008;
}

.page-cover-pic .laptop .quote-r-dot {
    background-color: #397008;
}

.page-endpic-paper:before {
    border-top-color: rgba(242, 242, 242, 1);
    border-right-color: rgba(242, 242, 242, 1);
}

.page-endpic-icon-circle {
    fill: #397008;
}

.page-endpic-icon-check {
    fill: rgba(255, 255, 255, 1);
}

.page-cover-icon {
    border-color: #397008;
}

.page-cover-icon-arr {
    fill: #397008;
}

.page-cover-pic-pen .icon-pen-body {
    fill: #397008;
}

.page-cover-pic-quote-r-dot {
    background-color: #397008;
}

.page-cover-pic-quote-l-bg .icon-bubble {
    fill: #397008;
}

.top-tips {
    background-color: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
}

.reward-tips-link {
    color: #397008;
}

.page-tip {
    background-color: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 1);
}

.page-tip_warn {
    background-color: rgba(218, 35, 25, 1);
}

.page-reward .reward-title {
    background-color: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 1);
}

.page-btn-wrap .page-btn-second:hover {
    background-color: rgba(244, 247, 254, 1);
}

.page-btn-second:before {
    background-color: rgba(0, 0, 0, 0.05);
}

.checkbox-cell:hover {
    background-color: rgba(40, 99, 243, 0.1);
}

.select-list li:hover {
    background-color: rgba(40, 99, 243, 0.1);
    color: #397008;
}

.select-list-li.on {
    color: #397008;
}

.checkbtn-label:hover {
    background-color: rgba(40, 99, 243, 0.1);
    color: #397008;
}

.linkage-item:hover {
    background-color: rgba(40, 99, 243, 0.1);
    color: #397008;
}

.linkage-item:hover:before {
    border-left-color: #397008;
}

.clickBlock:hover {
    background-color: rgba(40, 99, 243, 0.1);
}

.sort-list .sort-item:hover {
    border-color: #397008;
}
